<template>
  <div>
    <el-tabs type="card">
      <el-tab-pane>
        <span slot="label">课程签到</span>
        <el-table
            ref="singleTable"
            :border="true"
            :data="list"
            highlight-current-row
            max-height="680"
            style="width: 100%"
        >
          <el-table-column label="序号" sortable type="index" width="50">
          </el-table-column>
          <el-table-column label="课程名称" sortable>
            <template slot-scope="scope">
              <span
                  style="color: #00a0e9; cursor: pointer"
                  @click="handleGetActivityInfo(scope.row.courseId)"
              >
                {{ scope.row.courseName }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
              label="课程描述"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.courseDisc }}</span>
            </template>
          </el-table-column>
          <el-table-column
              label="课程人数"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.coursePeople }}</span>
            </template>
          </el-table-column>
          <el-table-column
              label="上课教师"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.teacherEntity.teacherName }}</span>
            </template>
          </el-table-column>
          <el-table-column
              label="开课时间"
              prop="courseDatetime"
              sortable
          />
          <el-table-column
              label="总共学时"
              prop="courseArrangeHours"
              sortable
          />
          <el-table-column
              label="课程价格"
              prop="courseArrangePrice"
              sortable
          />
          <el-table-column
              filter-placement="bottom-end"
              label="操作"
              prop="activityStatus"
              width="200"
          >
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="primary"
                  @click="handleGetTeacher(scope.row)"
              >
                详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            :current-page="currentPage"
            :page-size="currentPageSize"
            :page-sizes="[10, 50, 100, 500, 1000, 99999]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleGetBySizeActivity"
            @current-change="handleGetByNumActivity"
        />
      </el-tab-pane>
    </el-tabs>

    <el-dialog
        :center="true"
        :title="'当前排课信息'"
        :visible.sync="dialog.isShow"
        fullscreen
    >

      <form-for-arrange is-ready-only
                        :arrange-time-array="dialog.list"
                        :course-arrange-hours="dialog.CourseArrangeHours"
                        tourist
                        is-sign

                        @handleSign="toSign"
      />

      <span slot="footer">
           <el-dialog
               :visible.sync="dialog.orCodeShow"
               align="center"
               append-to-body
               title="二维码"
               close-on-press-escape
               close-on-click-modal
               :show-close="false"
               center
               width="30%">
      <el-image :src="dialog.signImg"/>
        <br>
        <el-button
            v-show="dialog.status === 0"
            ref="courseBtn"
            type="primary"
            @click="toFinishSign"
            :disabled="!!dialog.startBtn"
        >
          开始签到
        </el-button>
    </el-dialog>
      </span>
    </el-dialog>
    <el-dialog
        :visible.sync="infoDialog.isShow"
        title="活动信息"
    >
      <div v-if="infoDialog.content">
        <h3> 课程名称：{{ infoDialog.content.courseName }}</h3>

        <p> 总共学时：{{ infoDialog.content.courseArrangeHours }}</p>
        <p>课程价格{{ infoDialog.content.courseArrangePrice }}</p>
        <p>开课日期{{ infoDialog.content.courseDatetime }}</p>
        <p>课程描述{{ infoDialog.content.courseDisc }}</p>

        <p>课程价格：{{ infoDialog.content.coursePeople }}</p>

        <p>是否开课：{{ infoDialog.content.isopen|isOpen }}</p>
        <el-table
            :data="[infoDialog.content.teacherEntity]"
            style="width: 100%">
          <el-table-column
              label="教师名"
              prop="teacherName"
              width="180">
          </el-table-column>
          <el-table-column
              label="教师性别"
              prop="teacherSex"
              width="180">
          </el-table-column>
          <el-table-column
              label="教师职称"
              prop="teacherTitle">
          </el-table-column>
        </el-table>

      </div>
      <div v-else><span>暂无信息</span></div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="infoDialog.isShow = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>

import FormForArrange from "@/views/courseManage/components/formForArrange";

export default {
  components: { FormForArrange },
  data () {
    return {
      list: [],
      total: 0,
      keyword: "",
      articleContentshow: false,
      currentPage: 1,
      currentPageSize: 10,
      dialog: {
        isShow: false,
        status: null,
        signImg: "",
        id: null,
        signTime: null,
        isAble: true,
        list: [],
        orCodeShow: false,
        CourseArrangeHours: null,
        startBtn: false,
      },
      infoDialog: {
        isShow: false,
        content: null,
      },

    };
  },
  mounted () {
    this.handleGetByNumActivity(1);
  },
  methods: {
    async handleGetBySizeActivity (size) {
      this.currentPageSize = size;
      await this.handleGetCourse();
    },

    async handleGetActivityInfo (params) {
      // console.log(params)
      const res = await this.$http.courseInfo(params);
      if (res.code !== 0) return null;
      this.infoDialog.content = res.data;
      this.infoDialog.isShow = true;
    },
    // 分页查询全部活动
    async handleGetByNumActivity (num) {
      this.currentPage = num;
      await this.handleGetCourse();
    },
    async handleGetCourse () {
      let pageNumber = this.currentPage;
      let pageSize = this.currentPageSize;
      const res = await this.$http.courseFGetCourseByStatus({
        pageNumber,
        pageSize,
        status: 2,
      });
      if (res.code !== 0) return null;
      this.list = res.data.list;
      this.total = res.data.totalCount;

    },

    async handleSign (id) {
      const res = await this.$http.manager_courseSignInCode({ teachingScheduleId: id });
      if (res.code !== 0) return null;
      this.dialog.signImg = res.data;
    },
    async toSign (info) {
      this.dialog.status = info.status;
      this.dialog.id = info.teachingscheduleId;
      this.dialog.signTime = info.teachingscheduleBegintime;
      this.dialog.orCodeShow = true;
      await this.handleSign(info.teachingscheduleId);
    },
    async handleGetTeacher ({
      courseArrangeHours,
      courseId,
    }) {
      let params = {
        courseId,
        pageNum: 1,
        pageSize: 10,
        status: 0,
      };

      this.dialog.CourseArrangeHours = courseArrangeHours;
      await this.$http.getSchedulesByIdAndStatus(params)
          .then(res => {
            console.log(`res.data.list-->`, res.data.list);
            this.dialog.list = res.data.list.map(value => {
              return {
                ...value,
                isModify: true,
              };
            });
          }).catch(e => {
            console.log(`e-->`, e);
          });
      this.dialog.isShow = true;
    },
    async toFinishSign () {
      const id = this.dialog.id;
      await this.handleSign(id);
      let params = {
        teachingscheduleId: id,
        status: 1,
      };
      this.dialog.startBtn = true;
      return await this.$http.courseUpdateCourseScheduleStatus(params);
    },
  },
  filters: {
    isOpen (val) {
      if (val) return "已开课";
      return "未开课";
    },
  },
};
</script>
